#{extends '/template/main.html' /}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="/public/css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
<!--suppress JSUnresolvedLibraryURL -->
<script src="/public/js/jquery.min.js"></script>
<script src="/public/js/star-rating.js" type="text/javascript"></script>
<style>

    img{cursor: pointer;}
    #pic{width: 500px; height: auto; overflow: hidden; background: #fff; position: fixed; display: none; z-index: 100; top:20px; right:20px; padding:10px;  box-shadow: 0px 0px 5px 0px hsla(0,0%,5%,0.3); }
    #pic1{width:100%; }

</style>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">商户评分</h3>
        <div class="panel-options">
            <a href="#" data-toggle="panel">
                <span class="collapse-icon">&ndash;</span>
                <span class="expand-icon">+</span>
            </a>
        </div>
    </div>
    <div class="panel-body">
        <form method="POST" role="form" id="form" name="form" enctype="multipart/form-data" action="/BS0007/admin/merchant/updateStarNum/${merchant.id}/${pageNumber}" class="form-horizontal validate">
        #{if merchant?.imagePath != null && merchant?.imagePath != '' && merchant?.imagePath != 'imgSrc'}
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-3">商户Logo</label>

                <div class="col-sm-3 idContainer">
                    <a href="${merchant?.imagePath}" class="hoverimg">    <img src="${merchant?.imagePath}" style="width: 100px; "></a>
                </div>
            </div>
            <div class="form-group-separator"></div>
        #{/if}

        #{if merchant?.idImg != null && merchant?.idImg != ''}
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-3">证件照</label>

                <div class="col-sm-3 idContainer">
                    <a href="${merchant?.idImg}" class="hoverimg">   <img src="${merchant?.idImg}" style="width: 100px; "></a>

                </div>
            </div>
            <div class="form-group-separator"></div>
        #{/if}
        #{if merchant?.idImg == null || merchant?.idImg == '' }
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-3">证件照</label>

                <div class="col-sm-3 idContainer">
                    <img src="/public/activityImages/nopic.gif" style="width: 100px; ">

                </div>
            </div>
            <div class="form-group-separator"></div>
        #{/if}
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-3">二维码</label>

                <div class="col-sm-3 ">
                    <div id="qrCode_id" class="qrCodeDelivery" style="width: 100%;height: 90%; "></div>

                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-1">名称</label>

                <div class="col-sm-5">
                    <input type="text"  readonly name="merchant.name" class="form-control" value="${merchant?.name}">
                </div>
            </div>
            <input id="merchantId" name="merchantId" value="${merchant?.id}" type="hidden">
            <input id="verifyState" name="verifyState" value="" type="hidden">

            <div class="form-group-separator"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2">电话</label>

                <div class="col-sm-5">
                    <input type="text"  name="merchant.servicePhone" readonly class="form-control"  value="${merchant?.servicePhone}">
                </div>
            </div>
            <div class="form-group-separator"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2">证件号码</label>

                <div class="col-sm-5">
                    <input type="text"  name="merchant.idCode" readonly class="form-control"  value="${merchant?.idCode}">
                </div>
            </div>
            <div class="form-group-separator"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2">真实姓名</label>

                <div class="col-sm-5">
                    <input type="text"  name="merchant.realName" readonly class="form-control"  value="${merchant?.realName}">
                </div>
            </div>
            <div class="form-group-separator"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2">微信号</label>

                <div class="col-sm-5">
                    <input type="text"  name="merchant.weChat" readonly class="form-control"  value="${merchant?.weChat}">
                </div>
            </div>
            <div class="form-group-separator"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2">指导教师</label>

                <div class="col-sm-5">
                    <input type="text"  name="merchant.teacher" readonly class="form-control"  value="${merchant?.teacher}">
                </div>
            </div>
            <div class="form-group-separator"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2">团队名称</label>

                <div class="col-sm-5">
                    <input type="text"  name="merchant.team" readonly class="form-control"  value="${merchant?.team}">
                </div>
            </div>
            <div class="form-group-separator"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2">班级</label>

                <div class="col-sm-5">
                    <input type="text"  name="merchant.classes" readonly class="form-control"  value="${merchant?.classes}">
                </div>
            </div>
            <div class="form-group-separator"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-2">商户地址</label>

                <div class="col-sm-5">
                    <input type="text"  name="merchant.address" readonly class="form-control"  value="${merchant?.address}">
                </div>
            </div>
            <div class="form-group-separator"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-1">商户类型</label>
                <div class="col-sm-3">
                    <select name="merchant.type"  disabled class="form-control" style="width: 240px" >
                        <option value="STUDENT"   #{if merchant.type.toString() == 'STUDENT' } selected #{/if} >学生</option>
                        <option value="GETI"    #{if merchant.type.toString() == 'GETI' } selected  #{/if}>个体商户</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="form-group-separator"></div>
                <label class="col-sm-2 control-label" for="field-1">评分</label>
                <div class="col-sm-4">
                    <input id="rating-input" type="text"  name="merchant.starNum"  data-size="xs" value="${merchant?.starNum}"/>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="field-5"></label>

                <div class="col-sm-3">
                    <button type="button" onclick="getStart()" class="btn btn-success">&nbsp;&nbsp;保存&nbsp;&nbsp;</button>
                </div>

            </div>
        </form>

    </div>
    <script src="/public/jquery/jquery.qrcode.min.js"></script>
    <script>

        $(function(){
            createQR();
            $(".hoverimg").hover(function(){
                $(this).append("<p id='pic'><img src='"+this.href+"' id='pic1'></p>");
                $(".idContainer a").mousemove(function(e){
                    $("#pic").css({
                        "top":(e.pageY+2)+"px",
                        "left":(e.pageX+4)+"px"
                    }).fadeIn("fast");
                    // $("#pic").fadeIn("fast");
                });
            },function(){
                $("#pic").remove();
            });
        });
        var qrCodeBase = "${qrCodeBase}";
        function createQR() {
            $('#qrCode_id').html('');
            var url = qrCodeBase;
            console.log("qrCodeBase",qrCodeBase)
            $('#qrCode_id').html('');
            $('#qrCode_id').qrcode({width: 200, height: 150, correctLevel: 0, text: url});

        }

        jQuery(document).ready(function () {
            $("#input-21f").rating({
                starCaptions: function (val) {
                    if (val < 3) {
                        return val;
                    } else {
                        return 'high';
                    }
                },
                starCaptionClasses: function (val) {
                    if (val < 3) {
                        return 'label label-danger';
                    } else {
                        return 'label label-success';
                    }
                },
                hoverOnClear: false
            });
            var $inp = $('#rating-input');

            $inp.rating({
                min: 0,
                max: 5,
                step: 1,
                size: 'lg',
                showClear: false
            });

            $('#btn-rating-input').on('click', function () {
                $inp.rating('refresh', {
                    showClear: true,
                    disabled: !$inp.attr('disabled')
                });
            });


            $('.btn-danger').on('click', function () {
                $("#kartik").rating('destroy');
            });

            $('.btn-success').on('click', function () {
                $("#kartik").rating('create');
            });

            $inp.on('rating.change', function () {

            });


            $('.rb-rating').rating({
                'showCaption': true,
                'stars': '3',
                'min': '0',
                'max': '3',
                'step': '1',
                'size': 'xs',
                'starCaptions': {0: 'status:nix', 1: 'status:wackelt', 2: 'status:geht', 3: 'status:laeuft'}
            });
            $("#input-21c").rating({
                min: 0, max: 8, step: 0.5, size: "xl", stars: "8"
            });
        });
    </script>

</div>
<script>

    function getStart(){
        $("#form").submit();

    }

</script>

